<template>
	<div class="history flex-page-wrapper">
		<uni-nav-bar statusBar color="" backgroundColor="#fff" :title="$t('login.register.81l760')">
		</uni-nav-bar>
		<div class="flex-page">
			<uni-forms :modelValue="form" ref="form">
				<uni-forms-item class="history-item" :label="$t('login.register.f4pbr0')" v-if="identityType != 'identity_card'" name="gender" required :rules="[{ required: true, errorMessage: $t('login.register.47y11b'), trigger: 'blur' }]">
					<dict-select v-model="form.gender" :options="zd.sex" :placeholder="$t($t('login.register.47y11b'))"></dict-select>
				</uni-forms-item>
				<uni-forms-item class="history-item" :label="$t('login.register.aj5lx5')" v-if="identityType != 'identity_card'" name="birthday" required :rules="[{ required: true, errorMessage: $t('login.register.3kmkz8'), trigger: 'blur' }]">
					<uni-datetime-picker style="width: 100%" v-model="form.birthday" value-format="yyyy-MM-dd" default-value="1970-01-01" type="date" :placeholder="$t($t('login.register.3kmkz8'))" prefix-icon="none">
					</uni-datetime-picker>
				</uni-forms-item>
				<uni-forms-item class="history-item" :label="$t('login.register.03uwoy')" name="industry" required :rules="[{ required: true, errorMessage: $t('login.register.35gk4d'), trigger: 'blur' }]">
					<dict-select v-model="form.industry" :options="zd.industry" :placeholder="$t('login.register.35gk4d')"></dict-select>
				</uni-forms-item>
				<uni-forms-item class="history-item" v-if="form.industry == 'other'" :label="$t('login.register.eoc54e')" name="industryOtherDesc" required :rules="[{ required: true, errorMessage: $t('login.register.g17g74'), trigger: 'blur' }]">
					<uni-easyinput v-model="form.industryOtherDesc" :placeholder="$t('login.register.g17g74')"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item class="history-item" :label="$t('login.register.vzu025')" name="companyName" required :rules="[{ required: true, errorMessage: $t('login.register.c9q0s1'), trigger: 'blur' }]">
					<uni-easyinput v-model="form.companyName" :placeholder="$t('login.register.c9q0s1')"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item class="history-item" :label="$t('login.register.m2nrsw')" name="position" required :rules="[{ required: true, errorMessage: $t('login.register.56462w'), trigger: 'blur' }]">
					<dict-select v-model="form.position" :options="zd.position" :placeholder="$t($t('login.register.56462w'))"></dict-select>
				</uni-forms-item>
				<uni-forms-item class="history-item" v-if="form.position == 'other (please_specify)'" :label="$t('login.register.163u65')" name="positionDesc" required :rules="[{ required: true, errorMessage: $t('login.register.uxp015'), trigger: 'blur' }]">
					<uni-easyinput v-model="form.positionDesc" :placeholder="$t('login.register.uxp015')"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item class="history-item" :label="$t('login.register.gut58v')" name="email" required :rules="[{ required: true, errorMessage: $t('login.register.le657x'), trigger: 'blur' }, { type: 'email', errorMessage: $t('login.register.pefy8h'), trigger: ['blur', 'change'] }]">
					<uni-easyinput v-model="form.email" :placeholder="$t('login.register.01gf31')"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item v-if="!inviteCode" class="history-item" :label="$t('login.register.7l8041')" name="visitTime" required :rules="[{ required: true, errorMessage: $t('login.register.5uk4i0'), trigger: 'blur' }]">
					<dict-select v-model="form.visitTime" :options="zd.visit_time" :placeholder="$t($t('login.register.5uk4i0'))"></dict-select>
				</uni-forms-item>
			</uni-forms>
		</div>
		<div class="btns">
			<div class="btn active" @click="submit">{{$t('login.register.gx1t0q')}}</div>
		</div>
	</div>
</template>

<script>
	import protal from "@/api/protal"


	export default {
		data() {
			return {
				form: {
					"authCode": "",
					"birthday": "",
					"companyName": "",
					"email": "",
					"gender": "",
					"identityCard": "",
					"identityType": "",
					"industry": "",
					"industryOtherDesc": "",
					"name": "",
					"phone": "",
					"phoneCnyCode": "",
					"position": "",
					"positionDesc": "",
					"visitTime": ""
				},
				name: '',
				identityType: '',
				identityCard: '',
				phone: '',
				phoneCnyCode: '',
				authCode: '',
				inviteCode: '',
				isReal: false
			}
		},
		onLoad(query) {
			this.name = query.name
			this.identityType = query.identityType
			this.identityCard = query.identityCard
			this.phone = query.phone
			this.phoneCnyCode = query.phoneCnyCode
			this.authCode = query.authCode
			this.inviteCode = query.inviteCode
			this.isReal = query.isReal
			
			uni.setStorageSync('showWebcome', '')
			const validateData = uni.getStorageSync('validateData') ? JSON.parse(uni.getStorageSync('validateData')) : ''
			if (validateData) {
				this.form = validateData
			}
			if (this.isReal) {
				this.form.identityType = this.identityType
				this.form.identityCard = this.identityCard
				this.identityNumChange()
			}
		},
		methods: {
			// 根据身份证号码获取性别
			getSexByIdCard(IdCard) {
				// 一代身份证号码的第15位是性别的判断，奇数表示男性，偶数表示女性；
				// 二代身份证号码的第17位是性别的判断，奇数表示男性，偶数表示女性。
				if (parseInt(IdCard.substr(16, 1)) % 2 === 0 && IdCard.length === 18) {
					this.form.gender = '2'
				} else if (parseInt(IdCard.substr(14, 1)) % 2 === 0 && IdCard.length === 15) {
					this.form.gender = '2'
				} else {
					this.form.gender = '1'
				}
			},
			identityNumChange() {
				let identityType = this.form.identityType;
				let idCard = this.form.identityCard;
				if (identityType == 'identity_card' && idCard) {
					this.getSexByIdCard(idCard)
					let birthday = '';
					if (idCard.length === 15) {
						if (Number(idCard.substring(6, 8)) > 24) {
							birthday = '19' + idCard.substring(6, 12);
						} else {
							birthday = '20' + idCard.substring(6, 12);
						}
						this.form.birthday = `${birthday.slice(0, 4)}-${birthday.slice(4, 6)}-${birthday.slice(6)}`
					} else if (idCard.length === 18) {
						birthday = idCard.substring(6, 14);
						this.form.birthday = `${birthday.slice(0, 4)}-${birthday.slice(4, 6)}-${birthday.slice(6)}`
					}
				}
			},
			submit() {
				this.$refs.form.validate(valid => {
					if (!valid) {
						this.form.name = this.form.name || this.name
						this.form.identityType = this.form.identityType || this.identityType
						this.form.identityCard = this.form.identityCard || this.identityCard
						this.form.phone = this.form.phone || this.phone
						this.form.phoneCnyCode = this.form.phoneCnyCode || this.phoneCnyCode
						this.form.authCode = this.form.authCode || this.authCode
						let str = 'gwRegister'
						protal[str](this.form).then(res => {
							if (res.code == '0000') {
								uni.setStorageSync('token', res.data)
								uni.setStorageSync('showWebcome', '1')
								uni.showToast({
									icon: 'success',
									title: this.$t('login.register.uu3305')
								})
								uni.navigateTo({
									url: '/pages/index/index'
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.history {
		display: flex;
		flex-direction: column;
		min-height: 100vh;

		.flex-page {
			flex: 1;
			padding-top: 80rpx;
			padding-bottom: 40rpx;
			overflow: auto;
		}

		h3 {
			font-family: AlibabaPuHuiTi_3_75_SemiBold;
			font-size: 48rpx;
			color: #000000;
			line-height: 48rpx;
			text-align: center;
			font-style: normal;
			margin-bottom: 80rpx;
		}

		h4 {
			font-family: AlibabaPuHuiTi_3_55_Regular;
			font-size: 28rpx;
			color: #656565;
			line-height: 36rpx;
			font-weight: normal;
			text-align: center;
			font-style: normal;
			padding: 0 30rpx;
			margin: 20rpx 0 80rpx;
		}

		.history-item {
			padding: 0 40rpx;
			margin-bottom: 36rpx;

			.text {
				font-family: AlibabaPuHuiTi_3_55_Regular;
				font-size: 40rpx;
				color: #676767;
				line-height: 40rpx;
				font-style: normal;
				margin-top: 32rpx;
				display: flex;
				align-items: center;
			}

			/deep/ .el-form-item__label {
				font-family: AlibabaPuHuiTi_3_65_Medium;
				font-size: 30rpx;
				color: #181818;
				line-height: 30rpx;
				font-style: normal;
				display: flex;
			}

			/deep/ .el-select {
				width: 100%;
			}

			/deep/ .el-input__inner {
				padding: 0 15px;
			}

			/deep/ .el-input {
				margin-top: 20rpx;

				.el-input__inner {
					height: 88rpx;
					font-family: AlibabaPuHuiTi_3_45_Light;
					font-size: 30rpx;
					color: #000;
					line-height: 1;
					font-style: normal;
					border-radius: 12rpx;
				}
			}
		}

		.btns {
			padding-bottom: calc(env(safe-area-inset-bottom) + 20px);

			.btn {
				width: 638rpx;
				height: 88rpx;
				background: rgba(0, 0, 50, 0.1);
				border-radius: 44rpx;
				margin: 28rpx auto 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: AlibabaPuHuiTi_2_65_Medium;
				font-size: 32rpx;
				color: #000000;
				line-height: 40rpx;
				font-style: normal;

				&.active {
					background: #784DFF;
					color: #fff;
				}
			}
		}
	}
</style>